<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入部门名称" suffix-icon="el-icon-search" v-model="name"></el-input>
      <el-button class="ml-5" type="primary" @click="selectByTitle">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
    </div>

    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="部门名称" width="140"></el-table-column>
      <el-table-column prop="coding" label="部门编码"></el-table-column>
      <el-table-column prop="type" label="部门类型" width="170"></el-table-column>
      <el-table-column prop="phone" label="练习电话"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="查看用户"  width="150" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-zoom-in" circle @click="handleUser(scope.row)"></el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作"  width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="handlePower(scope.row)"></el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>



    <!--用户-->
    <el-drawer
        title="部门用户"
        :visible.sync="table"
        direction="rtl"
        size="50%">
      <el-table :data="user"  border>
        <el-table-column property="id" label="ID" width="150"></el-table-column>
        <el-table-column property="username" label="用户名" width="200"></el-table-column>
        <el-table-column property="email" label="邮箱"></el-table-column>
        <el-table-column property="realName" label="真实姓名"></el-table-column>
        <el-table-column property="gender" label="性别"></el-table-column>
      </el-table>
    </el-drawer>

    <!--新增-->
    <el-dialog title="内部单位" :visible.sync="dialogFormVisible" width="40%" >
      <el-form label-width="80px" size="small">
        <el-form-item label="单位名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <template>
            <el-radio v-model="form.type" label="1">公司</el-radio>
            <el-radio v-model="form.type" label="2">指定单位</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="机构编码">
          <el-input v-model="form.coding" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地区">
        <el-select style="height: 32px; width: 85%;"  v-model="form.location">
          <el-option
              v-for="item1 in region"
              :key="item1.name"
              :label="item1.name"
              :value="item1.name">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="9" v-model="form.remark" autocomplete="off" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exit">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改-->
    <el-drawer
        title="授权"
        :visible.sync="drawer"
        :with-header="false">

      <el-tree
          :data="arrList"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[1]"
          :highlight-current="true"
          :default-checked-keys="currentNodekey"
          :props="defaultProps"
          @check="currentChecked"
          ref="tree"

      >
      </el-tree>
      <div >
        <el-button @click="getCheckedNodes">确定</el-button>
        <el-button @click="getCheckedKeys">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData:[],
      multipleSelection:[],
      name:'',
      user:[],
      table:false,
      dialogFormVisible:false,
      form:{},
      region:[],
      drawer:false,
      arrList:[],
      defaultProps: {
        id:'id',
        children: 'children',
        label: 'label'
      },
      currentNodekey:[],
      rolePower:{},
    };
  },

  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //初始化页面
    selectAll(){
      let url="http://localhost:8080/units";
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
            let arr=response.data.data;
        for (let i = 0; i <arr.length; i++) {
          if (arr[i].type==1){
            arr[i].type="公司"
          }else {
            arr[i].type="指定单位"
          }
        }
        this.tableData=arr;
    })
    },
    //新增按钮
    handleAdd(){
      let url="http://localhost:8080/units/select/region";
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        this.region=response.data.data;
      })
      this.dialogFormVisible=true;
    },
    //新增
    save(){
      let url="http://localhost:8080/units/insert";
      let a=this.qs.stringify(this.form);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url,a).then((response)=>{
            if (response.data.state==20000){
              this.$message.success("添加成功")
              this.form={}
              this.dialogFormVisible=false;
              this.selectAll();
            }else {
              this.$message.error(response.data.message)
            }

          })
    },
    //新增取消
    exit(){
      this.dialogFormVisible=false;
      this.region=[];
    },
    //删除
    del(id){
      let url="http://localhost:8080/units/"+id+"/delete";
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response)=>{
        if (response.data.state==20000){
          this.$message.success("删除成功")
          this.selectAll();
        }else {
          this.$message.error(response.data.message)
        }

      })
    },
    //查询所属部门用户
    handleUser(r){
      let url="http://localhost:8080/units/select/user?id="+r.id;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        this.user=response.data.data;
        this.table=true
      })
    },
    //取消搜索
    reset(){
      this.name='';
      this.selectAll();
    },
    //搜索
    selectByTitle(){
      let url="http://localhost:8080/units/select?name="+this.name;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
            let arr=response.data.data;
        for (let i = 0; i <arr.length; i++) {
          if (arr[i].type==1){
            arr[i].type="公司"
          }else {
            arr[i].type="指定单位"
          }
        }
        this.tableData=arr;
      })
    },
    //修改权限按钮
    handlePower(r){
      // 执行方法1
      this.method1(r).then(() => {
        // 方法2
        this.lastMethod();
      });

    },
    /* 选中的权限 */
    currentChecked (nodeObj, SelectedObj) {
      this.rolePower.powers=SelectedObj.checkedKeys;
      console.log(SelectedObj.checkedKeys)   // 这是选中的节点的key数组
    },
    method1(r){
      return new Promise((resolve,reject) => {
        /* 显示 */
        this.currentNodekey=[]

        let urls='http://localhost:8080/units/power/exist/'+r.id;
        this.axios
            .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
            .get(urls).then((response)=>{
          this.currentNodekey=response.data.data
          this.$nextTick(() => {
            this.$refs.tree.setCheckedKeys(this.currentNodekey);
          });

          resolve(this.detail_method1)
        })

        this.rolePower.InternalUnitId=r.id;
      });

    },
    //权限列表
    loadPowerList(){
      let url='http://localhost:8080/roles/power';
      this.axios
          .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .get(url).then((response)=>{
        let a=response.data.data;

        for (let i = 0; i <a.length; i++) {
          this.arrList.push({id:0,label:'',children:[]});
          let arr=this.arrList[i];
          arr.id=a[i].id;
          arr.label=a[i].power;

          let url="http://localhost:8080/roles/power/son/"+a[i].id;
          this.axios
              .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
              .get(url).then((r)=>{
            let b=r.data.data;
            for (let j = 0; j <b.length ; j++) {
              arr.children.push({id:0,label:''});
              let c=arr.children[j];
              c.id=b[j].id;
              c.label=b[j].power;
            }
          })

        }
      })
    },
    lastMethod(){
      this.drawer= true;
    },
    /* 关闭选择权限 */
    getCheckedKeys(){
      this.drawer= false;
      this.rolePower={};
    },
    /*修改权限*/
    getCheckedNodes(){
      let url='http://localhost:8080/units/update/rolePower';
      let a=this.qs.stringify(this.rolePower)
      this.axios
          .create({'headers':{'Authorization':localStorage.getItem('jwt')}})
          .post(url,a).then((response)=>{
        if (response.data.state==20000){
          this.$message({
            message: '修改权限成功！',
            type: 'success'
          });
          this.drawer= false;
        }else {
          this.$message.error(response.data.message);
        }
      });
    }
  },
  mounted() {
  this.selectAll();
  this.loadPowerList();
  }
}
</script>